<template>
  <el-dialog v-model="show" title="账户列表" class="rounded-[15px]" width="550" :destroy-on-close="true">
    <ProTable :init-param="initParams" ref="proRef" :columns="columns" :request-api="getSiteAccountList" :search-col="2">
      <template #opera="{ row }">
        <el-button link @click="choose(row)" size="small">选择</el-button>
      </template>
    </ProTable>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { getSiteAccountList } from "@/api/modules/region";

const show = ref(false);

const proRef = ref<InstanceType<typeof ProTable> | null>();
const initParams = reactive({ pageSize: 20, pageNum: 1, phone: "", real_name: "", username: "", id: 0 });

const columns: ColumnProps[] = [
  { prop: "opera" },
  { prop: "username", label: "账号", search: { el: "input" } },
  { prop: "realName", label: "实名", search: { el: "input" } },
  { prop: "phone", label: "手机", search: { el: "input" } }
];

const open = (id = 0) => {
  initParams.id = id;
  show.value = true;
};

const emits = defineEmits(["choose"]);
const choose = (row: any) => {
  emits("choose", row);
  show.value = false;
};

defineExpose({ open });
</script>

<style></style>
